<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>招投标管理系统</title>
    <style>
        html,body {
            background-image: url();
        }
        body {
            margin: 0;
            padding: 0;
        }
        
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #F0F0F0;
        }
        
        .container {
            width: 300px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: #FFFFFF;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        h2 {
            text-align: center;
            color: #333333;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            color: #666666;
        }
        
        input[type="text"],
        input[type="password"],
        input[type="price"],
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #CCCCCC;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        input[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: #FFFFFF;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>招投标管理系统</h1>
    </div>
    
    <div class="container">
        <h2>注册</h2>
        <label for="identity">用户身份:</label>
        <select id="identity" name="identity">
            <option value="机电设备生产厂家">机电设备生产厂家</option>
            <option value="招标单位">招标单位</option>
        </select>

        公司名称:
        <input type="text" id="company" required>

        密码:
        <input type="password" id="password" required>

        法人：
        <input type="text" id="name" required>

        电话
        <input type="text" id="tel" required>

        注册资本:</label>
        <input type="price" id="price" required>

        <input id="button" type="submit" value="注册">
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var selectedValue;  
        // 获取select元素
        var selectElement = document.getElementById('identity');
        // 监听change事件 
        selectElement.addEventListener("change", function() {
            // 获取选中的值
            selectedValue = selectElement.value;
            // 输出选中的值
            console.log(selectedValue);
        });
        
        //获取表单数据提交后端处理
        var button = document.getElementById('button');
        button.onclick = function(){
            var company = $('#company').val();
            var password = $('#password').val();
            var name = $('#name').val();
            var tel = $('#tel').val();
            var price = $('#price').val();
            $.ajax({
                method:'post',
                url:'/register',
                data:{
                    groupName:selectedValue,
                    companyName:company,
                    name:name,
                    tel:tel,
                    password:password,
                    price:price,
                },
                success:function(data){
                    if(data && data.id > 0){
                        alert("注册成功,为您跳转登入页面...");
                        location.replace("/index.html");
                    }else{
                        alert("注册失败，该公司已存在，请登入");
                        location.replace("/index.html");
                    }
                }
            })
        }
    </script>
</body>
</html>